<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2019/9/29
  Time: 9:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上传头像</title>
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/animate.css" type="text/css">
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/font-awesome.css?v=4.4.0" type="text/css">
    <link rel="stylesheet" href="${path}/css/personCenter/person-center.css">
    <style>
        body {
            background-image: url(http://pzgv309jp.bkt.clouddn.com/faa30367-4e66-4b5a-8043-4b1f1df69cda.jpg);
            background-size: 650px 350px;
            background-repeat: repeat-x;
            background-position: 40% 50px;

        }

        input.error {
            border: 1px solid red;
        }

        label.error {


            padding-left: 16px;

            padding-bottom: 2px;

            font-weight: bold;

            color: #EA5200;
        }
    </style>
</head>
<body>
<%@include file="../common/nav_top.jsp"%>

<!-- 图片 begin -->
<div id="you">
    <span>悠 U旅行交友新方式</span><br>
    欢迎您!
</div>
<!-- 图片end -->
<!-- 面包屑 begin -->
<div class="container-fluid" style="margin-top: 150px;padding: 0px">
    <div class="row" style="margin: 0px 8%;font-size: 14px;">
        <ul class="breadcrumb" style="background-color: white">
            <li><a href="#">首页</a></li>
            <li><a href="#">我的悠U</a></li>
            <li class="active">我的订单</li>
        </ul>
    </div>
</div>
<!-- 面包屑 end -->
<!-- 个人中心 -->
<div class="container-fluid" style="margin-bottom: 20px;">
    <div class="row">
        <div class="col-md-1">
        </div>
        <!-- 左侧导航 begin -->
        <div class="col-md-2" style="padding: 0px">
            <!--  -->
            <div style="width: 75%;font-size: 14px;float: left;">
                <div id="leftnavs">
                    <a style="text-decoration: none;" class="list-group-item" name="change" onclick="person()">
                        <h3>我的悠U</h3>
                    </a>
                    <a class="list-group-item" name="change">
                        <span class="glyphicon glyphicon-tasks" onclick="person()"> 我的订单</span>

                    </a> </li>
                    <a href="../Tourist/myTraveler.html" class="list-group-item">
                        <span class="glyphicon glyphicon-flag"></span>&nbsp;我的导游

                    </a></li>
                    <a class="list-group-item" name="change" onclick="person()">
                        <span class="  glyphicon glyphicon-credit-card"></span> &nbsp;我的钱包
                    </a></li>
                    <a href="../traveler/myTraveler2.html" class="list-group-item">
                        <span class="glyphicon glyphicon-play-circle"></span>&nbsp;我的游记</a>
                    <a href="messages.html" class="list-group-item">
                        <span class="glyphicon glyphicon-bell"></span>&nbsp;系统通知</a></li>

                    <a class="list-group-item" name="change" onclick="person()">
                        <span class="glyphicon glyphicon-magnet"></span>&nbsp;个人资料</a>
                    <a href="#" class="list-group-item">
                        <span class="glyphicon glyphicon-user"></span>&nbsp;上传头像</a>
                </div>
            </div>
        </div>
        <!-- end -->

        <!-- 上传头像-->

        <div class="col-md-8 list-group-item" style="background-color: rgb(235, 243, 247);"
             name="show">
            <div class="container-fluid">
                <div class="row" style="margin-bottom: 30px">
                    <div>
                        <div style="font-size: 20px;margin-left: 30px;margin-top: 10px;">
                            上传头像
                            <hr style="background-color: gray;height:1px;margin-right: 50px;border: none">
                        </div>
                        <input type="hidden" value="${userTable.id}" id="id" name="id">
                        <div id="myAlert3"
                             style="background-color:  rgb(235, 243, 247);width: 75%;margin-left: 30px;overflow: hidden;height:400px;">
                            <div class="col-md-4 image">
                                <form method="post" enctype="multipart/form-data" id="imgform">
                                    <input type="file" name="myfile" id="myfile">
                                    <span style="color: gray;font-size: 16px">预览图片</span>
                                </form>
                                <!-- 图片放置位置 -->
                                <div id="preview" style="width:  350px;height:300px;">

                                </div>
                                <button type="submit" style="margin-top: 10px" class="btn btn-warning" onclick="saveImgs()">上传图片</button>
                            </div>

                            <div class="col-md-4" style="margin-left: 30%;margin-top:30px;display: none" id="success">
                                <img src="http://pzgv309jp.bkt.clouddn.com/b2cebc17-11ec-4327-bf9e-a1f4ff2c851d.png" width="20" height="20">
                                上传成功,返回  <a href="${path}/person"> 我的悠U </a> 查看
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 修改头像 -->
    </div>
</div>






<%@include file="../common/nav_bottom.jsp"%>
<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="${path}/plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="${path}/plugins/bootstrap/js/bootstrap.min.js"></script>

<script src="${path}/js/person_center/swiper-3.4.0.jquery.min.js"></script>

<%--七牛云--%>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src=" https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>
<script type="text/javascript" src="${path}/js/edit/ajaxfileupload.js"></script>
<script>

    $('#myfile').change( function() {
        alert("我是上传头像");
        $("#imgform").ajaxSubmit({
            url: "${path}/uploadHeadImg",
            method: 'POST',
            datType: 'json',
            success: function (data) {
                console.log(data.imgUrl);
                console.log(typeof data.imgUrl);
                var ele = "<img src=\"\" style='max-width: 400px;max-height: 300px' id='photo'/>"
                $("#preview").append(ele);//编程一个jquery的对象
                $("#preview").find("img").attr("src",data.imgUrl);//调用jquery的方法找到
//                        图片的标签的名称，再设置里面的src的属性的值


            },
            error: function (data) {
                alert(data);
            }
        })
    })

    //点击按钮上传图片
    function saveImgs() {
        var id = document.getElementById("id").value
        var photo=document.getElementById("photo").src;
        $.post('${path}/saveheadImg', {
            id:id,
            photo:photo,
        }, function (data) {
            if(data.flag){
                console.log(data);
                var ok = document.getElementById("success");
                ok.style.display = 'block';
            }else{
                console.log(data);
            }
        });
    }

    //跳转个人中心
    function person() {

        window.location='${path}/person'

    }
</script>

</body>
</html>
